<template>
    <!--搜索-->
    <div class="header">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button type="success" @click="accountSearch">查询</el-button>
        <el-button type="primary" @click="showDialog">添加</el-button>
    </div>
    <!--表格区域-->
    <el-table size="mini" :data="tableData" style="width: 99%">
        <el-table-column prop="id" label="账户ID" width="180"/>
        <el-table-column prop="account" label="账户" width="180"/>
        <el-table-column prop="name" label="名称" width="180"/>
        <el-table-column prop="phone" label="电话" width="180"/>
        <el-table-column prop="photo" label="图片" width="180"/>
        <el-table-column prop="role" label="角色" width="180"/>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="warning" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页器-->
    <el-pagination
            background layout="total,prev, pager, next,jumper"
            :total="total"
            v-model:currentPage="currentPage"
            :page-size="pageSize"
            @current-change="handleCurrentChange"
            class="pagination">
    </el-pagination>
    <!--添加对话框-->
    <el-drawer
            v-model="addopenDrawer"
            :title="isAdd?'添加账户':'修改账户'"
            size="30%"
            direction="rtl"
    >
        <div class="item">
            <span>头像：</span>
            <div>
                <div><el-input  v-model="accountForm.photo" placeholder="请输入图片"></el-input></div>
            </div>
        </div>
        <div class="item">
            <span>名称：</span>
            <div><el-input  v-model="accountForm.name" placeholder="请输入角色名称"></el-input></div>
        </div>
        <div class="item">
            <span>账户：</span>
            <div><el-input  v-model="accountForm.account" placeholder="请输入账户"></el-input></div>
        </div>
        <div class="item">
            <span>电话：</span>
            <div><el-input  v-model="accountForm.phone" placeholder="请输入电话"></el-input></div>
        </div>
        <div class="item">
            <span>角色：</span>
            <div><el-input  v-model="accountForm.role" placeholder="请输入角色"></el-input></div>
        </div>
        <div class="item">
            <span></span>
            <el-button type="primary" @click="editForm">{{isAdd?'添加':'修改'}}</el-button>
        </div>
    </el-drawer>
</template>

<script>
    import api from "../../api";
    import {reactive, toRefs, onMounted} from 'vue'
    import { ElMessageBox,ElMessage } from 'element-plus'
    export default {
        name: "Admin",
        setup() {
            let data = reactive({
                tableData: [],  // 账户列表
                total: 0, // 总条数
                pageSize:0, //一页显示几条数据
                currentPage: 1, //当前页码
                input:'', //输入框的内容
                type:1, // 为1表示分页 为2表示模糊查询后分页
                list:[], //模糊查询分页后数据
                isAdd:true,
                addopenDrawer:false ,//对话框
                 //账户表单数据
                 accountForm:{
                     id:'',
                     photo:'',
                     account:'',
                     role:'',
                     name:'',
                     phone:'',
                 }
            })
            onMounted(() => {
                getAccountList()
                getAccountNum()
            })
            // 显示添加账户对话框
            let showDialog=()=>{
                data.addopenDrawer=true
            }
            // 添加账户
           let editForm=()=>{
                if (data.isAdd){
                    api.getAccountAdd({
                        account:data.accountForm.account,
                        name:data.accountForm.name,
                        phone:data.accountForm.phone,
                        photo:data.accountForm.photo,
                        role:data.accountForm.role
                    }).then(res=>{
                        if (res.data.status===200){
                            ElMessage.success('添加成功')
                            data.addopenDrawer=false
                            getAccountList()
                        }else {
                            ElMessage.success('添加失败')
                        }
                    })
                }
                if (!data.isAdd){
                        // 修改账户
                        api.getAccountUpdate({
                            id:data.accountForm.id,
                            account:data.accountForm.account,
                            name:data.accountForm.name,
                            phone:data.accountForm.phone,
                            photo:data.accountForm.photo,
                            role:data.accountForm.role
                        }).then(res=>{
                            if (res.data.status===200){
                                ElMessage.success('修改成功')
                                data.addopenDrawer=false
                                getAccountList()
                            }else {
                                ElMessage.error('修改失败')
                            }
                        })
                }
           }
           // 删除账户
            let handleDelete= (row)=>{
                ElMessageBox.confirm(
                    '是否永久删除',
                    '警告',
                    {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).then(() => {
                        api.getAccountDelete({id:row.id}).then(res=>{
                            if (res.data.status===200){
                                ElMessage.success('删除成功')
                            }
                            getAccountList()
                        })
                    })
                    .catch(() => {
                        ElMessage.info('取消成功')
                    })
            }
           // 预编辑
            let handleEdit=(row)=>{
                data.accountForm=row
                data.isAdd=false
                data.addopenDrawer=true
            }

            // 获取用户列表
            let getAccountList = () => {
                api.getAccountList().then(res => {
                    data.pageSize=res.data.pageSize
                    data.tableData = res.data.data
                })
            }
            // 获取账户总数
            let getAccountNum = () => {
                api.getAccountCount().then(res => {
                    data.total = (res.data.result[0]["count(*)"])
                })
            }
            // 分页
            let handleCurrentChange = (page) => {
                data.currentPage=page
              if (data.type===1){
                  // 发起请求获取下一页
                  api.getAccountList({page: page}).then(res => {
                      data.tableData = res.data.data
                  })
              }else {
                  // 模糊查询后分页每页显示5条
                 data.tableData=data.list.slice((page-1)*5,page*5)
              }
            }
            // 模糊查询
            let accountSearch=()=>{
                api.getAccountSearch({search:data.input}).then(res=>{
                    data.currentPage=1 // 查询到默认第一页
                    if (res.data.status===200){
                        data.list=res.data.result //模糊查询分页后总条数
                        data.total=res.data.result.length
                        data.pageSize=5
                        data.tableData=res.data.result.slice(0,5)
                        data.type=2
                    }else {
                        data.tableData=[]
                        data.total=0
                        data.type=1
                    }
                })
            }
            return {
                ...toRefs(data),
                handleCurrentChange,
                getAccountNum,
                accountSearch,
                showDialog,
                editForm,
                handleEdit,
                handleDelete
            }
        }
    }
</script>

<style scoped lang="scss">
    .pagination {
        margin-top: 10px;
    }

    .header {
        display: flex;
    }
    button{
        margin-left: 20px;
    }
    .item {
        display: flex;
        font-size: 14px;
        align-items: center;
        margin-bottom: 10px;
    span {
        width: 70px;
        text-align: right;
        color: #666;
    }
    div{
        flex: 1;
      }
    }
    .avatar-uploader  {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 178px;
        height: 178px;
    }
    .avatar-uploader:hover {
        border-color: #409eff;
    }
    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
